<template>
    <div class="container">
        <el-dialog title="区域设置货架" :visible.sync="dialog.centerDialogVisible" width="30%" center :lock-scroll="true"
            @open="getOrg" @close="hideDialog">
            <el-form ref="regions" :rules="rules" :model="regions" label-width="100px" label-position="left">
                <el-form-item label="仓库名称：" prop="name">
                    <el-select style="margin-bottom: 5px" v-model="search.organization" :multiple="false" filterable
                        remote center reserve-keyword placeholder="请选择仓库" :remote-method="organizationMethod"
                        @change="changeHouse" :loading="insides.loading">
                        <el-option v-for="item in insides.option" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="区域名称：" prop="name" v-show="isshowArea">
                    <el-select style="margin-bottom: 5px" v-model="search.organiarea" :multiple="false" filterable
                        remote center reserve-keyword placeholder="请选择区域" @change="changeArea"
                        :loading="insides.loading">
                        <el-option v-for="item in insides.insidesArea" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="区域货架：" prop="name" v-show="isshowShelves">
                    <el-select style="margin-bottom: 5px" v-model="search.organishelves" :multiple="false" filterable
                        remote center reserve-keyword placeholder="请选择货架" @change="changeShelves"
                        :loading="insides.loading">
                        <el-option v-for="item in insides.insidesShelves" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="货架层数：" prop="name" v-show="isshowNumber">
                    <el-select style="margin-bottom: 5px" v-model="search.organinumber" :multiple="false" filterable
                        remote center reserve-keyword placeholder="请选择货架层数" @change="changeNumber"
                        :loading="insides.loading">
                        <el-option v-for="item in insides.insidesNumber" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import { selectWarehouseData, selectWarehouseAreaData, selectBindShelvesData, bindGoodsShelves } from "@/api/warehouse/warehouse";
    import store from "@/store";
    export default {
        props: {
            dialog: Object,
            regions: Object,
        },
        data() {
            return {
                rules: {
                },
                search: {
                    organization: "",
                    organiarea: "",
                    organishelves: "",
                    organinumber: "",
                },
                insides: {
                    innerVisible: false,
                    option: [],
                    value: "",
                    list: [],
                    loading: false,
                },
                insidesArea: {
                    innerVisible: false,
                    option: [],
                    value: "",
                    list: [],
                    loading: false,
                },
                insidesShelves: {
                    innerVisible: false,
                    option: [],
                    value: "",
                    list: [],
                    loading: false,
                },
                insidesNumber: {
                    innerVisible: false,
                    option: [],
                    value: "",
                    list: [],
                    loading: false,
                },

                isshowArea: false,
                isshowShelves: false,
                isshowNumber: false,

            };
        },

        methods: {
            getOrg(keyword = "") {
                let data = {
                    keyword
                };
                //获取仓库
                selectWarehouseData(data).then((res) => {
                    let data = res.data.list
                    if (data.length == 0) {
                        this.$message.error('获取项目数据为空')

                    } else {
                        this.insides.option = data.map((item) => {
                            return { value: `${item.house_code}`, label: `${item.house_name}` };
                        });

                    }
                });
            },
            //获取仓库数据
            organizationMethod(query) {
                if (query !== "") {
                    this.getOrg(query);
                } else {
                    this.insides.option = [];
                }
            },
            changeHouse(value) {
                this.getArea();
                this.isshowArea = false;
                this.isshowShelves = false;
                this.isshowNumber = false;
                this.search.organiarea = '';
                this.search.organishelves = '';
                this.search.organinumber = '';

            },
            //仓库获取区域
            getArea() {
                if (this.search.organization.length > 0) {
                    let data = {
                        house_code: this.search.organization
                    };
                    //获取仓库
                    selectWarehouseAreaData(data).then((res) => {
                        let data = res.data.arealist
                        if (data.length == 0) {
                            this.$message.error('获取区域为空')
                            this.isshowArea = false;
                        } else {
                            this.isshowArea = true;
                            this.insides.insidesArea = data.map((item) => {
                                return { value: `${item.id}`, label: `${item.area_name}` };
                            });
                        }
                    });
                } else {

                }

            },
            changeArea(value) {
                this.getshelvees()
                this.isshowShelves = false;
                this.isshowNumber = false;

                this.search.organishelves = '';
                this.search.organinumber = '';
            },
            //获取区域绑定货架
            getshelvees() {
                if (this.search.organiarea.length > 0) {
                    let data = {
                        house_code: this.search.organization,
                        house_area_id: this.search.organiarea,
                    };
                    //获取仓库
                    selectBindShelvesData(data).then((res) => {
                        let data = res.data.shelveslist
                        if (data.length == 0) {
                            this.$message.error('获取货架为空')
                            this.isshowShelves = false;
                        } else {
                            this.isshowShelves = true;
                            this.insides.insidesShelves = data.map((item) => {
                                return { value: `${item.id + "&" + item.number + "&" + item.goods_shelves_id}`, label: `${item.shelves_name}` };
                            });
                        }
                    });
                } else {

                }

            },
            changeShelves(value) {
                this.isshowNumber = false;
                this.search.organinumber = '';
                this.getNumber(value)
            },
            getNumber(value) {
                let data
                let str = value;
                var arr = str.split("&");
                var value2 = arr[1];
                if (value2 == 0) {
                    this.$message.error('获取货架层数为空')
                    this.isshowNumber = false;
                } else {
                    this.isshowNumber = true;
                    data = this.createArray(value2);
                    this.insides.insidesNumber = data.map((item) => {
                        return { value: `${item.value}`, label: `${item.name}` };
                    });
                }
            },
            changeNumber(value) {

            },
            createArray(count) {
                var arr = [];
                for (var i = 1; i <= count; i++) {
                    var obj = { name: i, value: i }
                    arr.push(obj);
                }
                return arr;
            },

            hideDialog() {
                this.dialog.centerDialogVisible = false;

                this.isshowArea = false;
                this.isshowShelves = false;
                this.isshowNumber = false;

                this.search.organization = '';
                this.search.organiarea = '';
                this.search.organishelves = '';
                this.search.organinumber = '';

                this.$refs["regions"].resetFields();
            },

            //提交
            confirm() {
                let str = this.search.organishelves;
                var value1 = '';
                var value2 = '';
                if (str.length > 0) {
                    var arr = str.split("&");
                    value1 = arr[0];
                    value2 = arr[2];
                }
                let data = {
                    goods_code: this.regions.id,
                    house_code: this.search.organization,
                    house_area_id: this.search.organiarea,
                    area_shelves_id: value1,
                    goods_shelves_id: value2,
                    shelves_number: this.search.organinumber,
                };
                bindGoodsShelves(data)
                    .then((res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: "success",
                            });
                            this.hideDialog();
                            this.$emit("upData");
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error",
                            });
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });

                this.isshowArea = false;
                this.isshowShelves = false;
                this.isshowNumber = false;

                this.search.organization = '';
                this.search.organiarea = '';
                this.search.organishelves = '';
                this.search.organinumber = '';
            },
            //取消
            cancel() {
                this.isshowArea = false;
                this.isshowShelves = false;
                this.isshowNumber = false;

                this.search.organization = '';
                this.search.organiarea = '';
                this.search.organishelves = '';
                this.search.organinumber = '';
                this.hideDialog();
            },
        },
    };
</script>